<template>
	<view :style="{height:bodyheight + 'rpx', backgroundColor:'#f8f8f8'}">
		<view class="content">
			<u--form labelPosition="left" :model="reqProjData" :rules="rules" ref="form1" :style="{width: '95%' }"
				class="content">
				<u-form-item :labelWidth="15" prop="projName" borderBottom>
					<view class="input-box">
						<input maxlength="15" v-model="reqProjData.projName" class="uni-input" type="number"
							placeholder="请输入标题 ( 15字内 )" placeholder-style="font-weight: 600"
							@blur="reqProjData.projName = reqProjData.projName.replace(/\s*/g,'')"></input>
						<!-- <u-icon name="close-circle" size="14" @click="reqProjData.projName = ''"></u-icon> -->
					</view>
				</u-form-item>
				<u-form-item :labelWidth="15" prop="projDesc" borderBottom>
					<u--textarea v-model="reqProjData.projDesc" height="400" :maxlength="200" border="none"
						placeholder="请输入正文内容( 200字内 )"></u--textarea>
				</u-form-item>
				<u-form-item leftIcon="rewind-right" label="人数" :labelWidth="60" prop="num" borderBottom>
					<view class="input-box">
						<input maxlength="3" v-model="reqProjData.num" type="number" placeholder="请输入人数"
							@blur="mathRound"></input>
						<!-- <u-icon name="close-circle" size="14" @click="reqProjData.num = ''"></u-icon> -->
					</view>
				</u-form-item>
				<u-form-item leftIcon="rewind-right" label="分类" :labelWidth="60" prop="sortId" borderBottom
					@click="showSortpicker = true">
					<view><text class="placeholder-box">{{sortName || '请选择分类'}}</text></view>
					<u-icon slot="right" name="arrow-right" bold></u-icon>
				</u-form-item>
				<u-form-item style="100rpx" leftIcon="rewind-right" label="学院" :labelWidth="60" prop="department"
					borderBottom @click="showFliterDep = true">
					<view><text class="placeholder-box">{{depName || '学院不限'}}</text></view>
					<u-icon slot="right" name="arrow-right" bold></u-icon>
				</u-form-item>
				<u-form-item leftIcon="rewind-right" label="年级" :labelWidth="60" prop="grade" borderBottom
					@click="showFliterGrade = true">
					<view><text class="placeholder-box">{{gradeDesc || '年级不限'}}</text></view>
					<u-icon slot="right" name="arrow-right" bold></u-icon>
				</u-form-item>
			</u--form>
			<at-dep-picker :showPicker="showFliterDep" @confirm="selectDep" @on-close="showFliterDep= false">
			</at-dep-picker>
			<at-grade-picker :showPicker="showFliterGrade" @confirm="selectGrade" @on-close="showFliterGrade=false">
			</at-grade-picker>
			<u-picker :columns="columns" :show="showSortpicker" @cancel="showSortpicker = false"
				closeOnClickOverlay="true" keyName="name" @close="showSortpicker= false" @confirm="selectSort">
			</u-picker>
		</view>
		<u-modal :show="showToEdit" @confirm="toEdit" :closeOnClickOverlay="true" showCancelButton
			@cancel="showToEdit=false" @close="showToEdit=false" title='完善信息'
			content="检测到您还未完善学校信息, 请先完善再投递!(完善信息可以提高投递成功率哦~)">
		</u-modal>
		<view style="height: 220rpx;"></view>
		<at-submit-btn txt="发布" @submit="submit"></at-submit-btn>
	</view>
</template>

<script>
	import AtGradePicker from '@/components/AtGradePicker'
	import AtDepPicker from '@/components/AtDepPicker'
	import AtSubmitBtn from '@/components/AtSubmitBtn'
	import {
		formatBr
	} from '@/utils/formatBr.js'
	import {
		addproj
	} from '@/common/http.api.js'
	export default {
		components: {
			AtGradePicker,
			AtDepPicker,
			AtSubmitBtn
		},
		data() {
			return {
				bodyheight: uni.$bodyHeight,
				showSortpicker: false,
				showFliterDep: false,
				showFliterGrade: false,
				showToEdit: false,
				depName: '',
				gradeDesc: '',
				sortName: '',
				rules: {
					sortId: {
						required: true,
						message: '请选择分类'
					},
					num: {
						required: true,
						message: '请填写人数',
						type: 'number',
						min: 1
					},
					projName: {
						required: true,
						message: '请填写标题'
					},
					projDesc: {
						required: true,
						message: '请填写正文'
					}
				},
				columns: [
					[{
							id: '1',
							name: '竞赛'
						},
						{
							id: '2',
							name: '运动'
						},
						{
							id: '3',
							name: '其他'
						},
					]
				],
				reqProjData: {
					userId: '',
					schoolId: uni.getStorageSync('schoolId'),
					sortId: '',
					department: '',
					grade: '',
					projName: '',
					projDesc: '',
					num: null,
					grade: '',
				},
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			toEdit() {
				uni.navigateTo({
					url: '/pages/editInfo/editInfo'
				})
				this.showToEdit = false
			},
			selectDep(depId, depName) {
				this.reqProjData.department = depId
				this.depName = depName
				this.showFliterDep = false
			},
			selectGrade(grade, gradeDesc) {
				this.reqProjData.grade = grade // 存到一个中转对象
				this.gradeDesc = gradeDesc
				this.showFliterGrade = false
			},
			selectSort(arr) {
				this.reqProjData.sortId = arr.value[0].id
				this.sortName = arr.value[0].name
				this.showSortpicker = false
			},
			mathRound() {
				this.reqProjData.num = Math.ceil(this.reqProjData.num)
			},
			submit() {
				if (this.$store.state.userInfo.department == '0') { // 这个字段表示用户未完善学校信息
					return this.showToEdit = true
				}
				this.$refs.form1.validate().then(async () => {
					uni.$loading()
					// 处理换行
					this.reqProjData.userId = this.$store.state.userId
					this.reqProjData.projDesc = formatBr(this.reqProjData.projDesc)
					const res = await addproj(this.reqProjData)
					if (res.code == 0) uni.$showMsg('发布成功', 'success', 2000)
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 2100)

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 90%;
		margin: auto;
	}

	.textarea-box {
		background-color: #eee;
	}

	.input-box {
		display: flex;
		justify-content: space-between;
	}

	.uni-input {
		font-weight: bold;
	}

	.placeholder-box {
		font-size: 13px;
		padding: 6rpx 15rpx;
		border-radius: 30rpx;
		color: #fff;
		background-color: #96c1ff;
	}

	.blodfont {
		font-weight: 600 !important;
	}

	/deep/.u-form .u-form-item .u-form-item__body {
		padding: 30rpx 0;
	}

	/deep/.u-form .u-form-item .u-form-item__body .u-form-item__body__left .u-form-item__body__left__content__required {
		font-size: 0;
	}

	/deep/.u-form .u-form-item .u-form-item__body .u-form-item__body__right .u-form-item__body__right__content .u-form-item__body__right__content__slot {
		// font-weight: bold ;
	}

	/deep/.u-form .u-form-item .u-form-item__body .u-form-item__body__left__content .u-form-item__body__left__content__label {
		font-weight: bold;
	}
</style>
